<template>
	<!--品牌选择+图片上传-->
	<view class="com-content">
		<view class="com-box">
			<view class="input-row" :style="{height:rHeight + 'px'}">
				<view class="input-row-t"><text class="required" v-if="required">*</text>名称：</view>
				<input class="input-row-w" :style="{height:rHeight + 'px'}" type="text" v-model="params.name"
					placeholder="请输入分类名称" placeholder-style="color:#999"></input>
			</view>
			<template v-if="pageType==='pop' || pageType==='prop' ">
				<view class="sel-row" :style="{height:rHeight + 'px'}" @click="tolink">
					<view class="input-row-t">
						<text class="required" v-if="required">*</text>流程：
					</view>
					<view class="input-row-r">{{title}}<view class="icons icon-gengduo"></view></view>
				</view>
			</template>
			<view class="input-row-img">
				<view class="input-row-t"><text class="required" v-if="required">*</text>封面：</view>
				<view class="image-upload-list" v-if="max > 1">
					<view class="image-upload-Item2" v-for="(item,index) in uploadLists" :key="index">
						<image :src="item" @click="imgPreview(index)" mode="aspectFill"></image>
						<view class="image-upload-Item-del" v-if="remove" @click="imgDel(index)">×</view>
					</view>
					<view class="image-upload-Item2 image-upload-Item-add2" v-if="uploadLists.length<max"
						@click="imgAdd">
						<view class="icon-add">+</view>
					</view>
				</view>
				<view class="image-upload-list" v-else>
					<view class="image-upload-Item2" v-for="(item,index) in uploadLists" :key="index">
						<image class="image-upload-Item-img" :src="item" @click="imgPreview(index)" mode="aspectFill"></image>
						<view class="image-upload-Item-del" v-if="remove" @click="imgDel(index)">×</view>
					</view>
					<view class="image-upload-Item2 image-upload-Item-add2" v-if="uploadLists.length<max"
						@click="imgAdd2">
						<view class="icon-add">+</view>
					</view>
				</view>
			</view>
		</view>
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-con">
					<view class="w-con-txt" v-if="uploadType === 'hc'" @click="toPop">POP画册</view>
					<view class="w-con-txt" v-if="uploadType === 'fm'" @click="topaizhao">拍照</view>
					<view class="w-con-txt" v-if="uploadType === 'hc' || uploadType === 'fm'" @click="tophoto">手机相册</view>
					<view class="w-con-cen" @click="cancel('tip')">取消</view>
				</view>
			</view>
		</w-popup>
		<!--编辑框-->
		<w-popup :show="showdel" :type="type1" @change="change1">
			<view class="w-tip2">
				<view class="w-con">
					<view class="txt-row">是否确认删除？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('del')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import imageUpload from '@/components/image-upload/image-upload.vue';
	import wPopup from '@/components/w-popup/w-popup2.vue';
	export default {
		name: "record_count",
		components: {
			imageUpload,
			wPopup
		},
		props: {
			title:{
				type: String,
				default: ''
			},
			uploadType:{
				type: String,
				default: 'fm'
			},
			pageType: {
				type: String,
				default: '1'
			},
			params: {
				type: Object,
				default () {
					return []
				}
			},
			required: {
				type: Boolean,
				default: false
			},
			rHeight: {
				type: String,
				default: '55'
			},
			max: { //展示图片最大值
				type: Number,
				default: 1,
			},
			chooseNum: { //选择图片数
				type: Number,
				default: 1,
			},
			name: { //发到后台的文件参数名
				type: String,
				default: 'file',
			},
			remove: { //是否展示删除按钮
				type: Boolean,
				default: true,
			},
			sourceType: { //选择照片来源 【ps：H5就别费劲了，设置了也没用。不是我说的，官方文档就这样！！！】
				type: Array,
				default: () => ['album', 'camera'],
			},
			action: { //上传地址
				type: String,
				default: '',
			},
			headers: { //上传的请求头部
				type: Object,
				default: () => {},
			},
			formData: { //HTTP 请求中其他额外的 form data
				type: Object,
				default: () => {},
			},
			compress: { //是否需要压缩
				type: Boolean,
				default: true,
			},
			quality: { //压缩质量，范围0～100
				type: Number,
				default: 80,
			},
			value: { //受控图片列表
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {
				showtip: false, //是否显示弹窗1
				showdel:false, 
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				uploadLists: [],
				selIndex:0
			}
		},
		mounted: function() {
			this.$nextTick(function() {
				this.uploadLists = this.value;
			});
		},
		watch: {
			value(val, oldVal) {
				//console.log('value',val, oldVal)
				this.uploadLists = val;
			},
		},
		methods: {
			topaizhao(){
				
			},
			tophoto(){
				
			},
			imgAdd2() {
				/* this.content1 = 'center'
				this.type1 = 'bottom';
				this.showtip = true; */
				this.$emit('chooseImg');
				
			},
			imgAdd() {
				this.content1 = 'center'
				this.type1 = 'bottom';
				this.showtip = true;
			},
			tolink() {
				uni.navigateTo({
					url: '/pages/flow/flowlist'
				})
			},
			//跳转
			toPop() {
				uni.navigateTo({
					url: '/pages/picBook/picBookDet?pageType=true'
				})
			},
			photoAlbum() {
				uni.chooseImage({
					count: this.chooseNum,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: this.sourceType,
					success: (res) => {
						//console.log('tempFiles', res)
						if (this.action == '') { //未配置上传路径
							this.$emit("chooseSuccess", res.tempFilePaths);
						} else {
							if (this.compress && (res.tempFiles[0].size / 1024 >
									1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传
								this.imgCompress(res.tempFilePaths);
							} else {
								this.imgUpload(res.tempFilePaths);
							}
						}
					}
				});
			},
			imgDel(index) {
				this.selIndex = index;
				this.content1 = 'center'
				this.type1 = 'center';
				this.showdel = true;
			},
			confirm(){
				this.showdel = false;
				this.$emit("imgDelete", this.selIndex);
			},
			imgPreview(index) {
				//console.log('imgPreview', index)
				uni.previewImage({
					urls: this.uploadLists,
					current: index,
					loop: true,
				});
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false;
					this.showdel = false;
				}
			},
			//取消
			cancel(type) {
				this['show' + type] = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.image-upload-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		.image-upload-Item2 {
			display: flex;
			width: 100%;
			height: 388rpx;
			border-radius: 10rpx;
			position: relative;
			background: $uni-bg-color-grey;

			.image-upload-Item-img {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}

			.image-upload-Item-del {
				background-color: #f5222d;
				font-size: 24rpx;
				position: absolute;
				width: 35rpx;
				height: 35rpx;
				line-height: 35rpx;
				text-align: center;
				top: 0;
				right: 0;
				z-index: 100;
				color: #fff;
			}
		}

		.image-upload-Item-add2 {

			.icon-add {
				line-height: 388rpx;
				width: 100%;
				font-size: 105rpx;
				text-align: center;
				color: #d9d9d9;
			}
		}
	}

	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 100vw;
		min-height: 300rpx;
		border-radius: 20rpx 20rpx 0px 0px;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx 0rpx;
		margin: 30rpx auto 0;

		.w-con {
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-3;
			text-align: center;
			.w-con-txt {
				border-bottom: 1rpx solid #f5f5f5;
			}
			.w-con-cen {
				color: #198FFF;
			}
		}
	}
	/* 提示窗口 */
	.w-tip2 {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		// box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;
	
		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	
		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			height: 84rpx;
			line-height: 84rpx;
	
			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}
	
			.w-but-txt:last-of-type {
				border-right: none;
				color: #FF4338;
			}
		}
	
		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 30rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
	
			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: $font-color-9;
			}
		}
	}

	.required {
		color: #FE5252;
		font-size: 28rpx;
	}

	.sign_no {
		background-color: #eee;
		color: #333;
	}

	.sign_on {
		background-color: #02BB6F;
		color: #fff;
	}

	.fc_green {
		font-size: 26rpx;
		color: #02BB6F;
	}

	.magin_l {
		margin-left: 25rpx;
	}

	.color-red {
		color: red !important;
	}

	.font-small {
		font-size: 24rpx !important;
	}

	.com-box {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;

		.sel-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f5f5f5;

			.input-row-t {
				font-size: 32rpx;
				color: #333333;
			}
			.input-row-r{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.input-row {
			display: flex;
			align-items: center;
			width: 100%;
			flex-direction: row;
			background: $uni-bg-box-color;
			border-bottom: 1rpx solid #f5f5f5;

			.input-row-w {
				display: flex;
				flex: 1;
				width: 100%;
				color: $font-color-3;
				font-size: 28rpx;
			}

			.input-row-t {
				font-size: 32rpx;
				color: #333333;
			}
		}

		.input-row-img {
			display: flex;
			flex: 1;
			width: 100%;
			flex-direction: column;
			background: $uni-bg-box-color;

			.input-row-w {
				display: flex;
				flex: 1;
				width: 100%;
				color: $font-color-3;
				font-size: 28rpx;
			}

			.input-row-t {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
